{% extends 'base.html' %}

{% block title %}{{ table.name }} - 球台详情 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}球台详情{% endblock %}

{% block extra_css %}
<style>
    .detail-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid #f8f9fa;
    }

    .table-title {
        font-size: 2rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
    }

    .table-meta {
        display: flex;
        gap: 1rem;
        margin-top: 0.5rem;
        flex-wrap: wrap;
    }

    .table-status {
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .status-available {
        background: #d4edda;
        color: #155724;
    }

    .status-maintenance {
        background: #fff3cd;
        color: #856404;
    }

    .status-disabled {
        background: #f8d7da;
        color: #721c24;
    }

    .table-type {
        background: #e3f2fd;
        color: #1565c0;
        padding: 0.5rem 1rem;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .info-section {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.5rem;
    }

    .section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 0.5rem;
        color: #007bff;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .info-item:last-child {
        margin-bottom: 0;
    }

    .info-label {
        font-weight: 600;
        color: #495057;
        min-width: 80px;
        margin-right: 1rem;
    }

    .info-value {
        color: #6c757d;
        flex: 1;
    }

    .rate-display {
        font-size: 1.5rem;
        font-weight: 700;
        color: #28a745;
    }

    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        border-left: 4px solid;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .stat-card.primary { border-left-color: #007bff; }
    .stat-card.success { border-left-color: #28a745; }
    .stat-card.info { border-left-color: #17a2b8; }
    .stat-card.warning { border-left-color: #ffc107; }

    .stat-icon {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .stat-icon.primary { color: #007bff; }
    .stat-icon.success { color: #28a745; }
    .stat-icon.info { color: #17a2b8; }
    .stat-icon.warning { color: #ffc107; }

    .stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0;
        line-height: 1;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.875rem;
        margin-top: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-sublabel {
        color: #6c757d;
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .status-form {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 2rem;
    }

    .btn-action {
        padding: 0.75rem 2rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .usage-rate {
        position: relative;
        height: 20px;
        background: #e9ecef;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 0.5rem;
    }

    .usage-progress {
        height: 100%;
        background: linear-gradient(90deg, #28a745, #20c997);
        border-radius: 10px;
        transition: width 0.3s ease;
    }

    .usage-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.75rem;
        font-weight: 600;
        color: white;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }

    @media (max-width: 768px) {
        .table-header {
            flex-direction: column;
            gap: 1rem;
        }

        .table-meta {
            justify-content: flex-start;
        }

        .action-buttons {
            flex-direction: column;
        }

        .btn-action {
            width: 100%;
            text-align: center;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }

        .stat-cards {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 球台基本信息 -->
    <div class="detail-card">
        <div class="table-header">
            <div>
                <h1 class="table-title">{{ table.name }}</h1>
                <div class="table-meta">
                    <span class="table-status status-{{ table.status }}">
                        {% if table.status == 'available' %}可用
                        {% elif table.status == 'maintenance' %}维护中
                        {% elif table.status == 'disabled' %}禁用
                        {% endif %}
                    </span>
                    <span class="table-type">
                        {% if table.table_type == 'standard' %}标准台
                        {% elif table.table_type == 'training' %}训练台
                        {% elif table.table_type == 'vip' %}VIP台
                        {% elif table.table_type == 'competition' %}比赛台
                        {% endif %}
                    </span>
                </div>
                <p class="text-muted mb-0 mt-2">
                    创建时间：{{ table.created_at.strftime('%Y年%m月%d日') if table.created_at else '未知' }}
                    {% if table.updated_at and table.updated_at != table.created_at %}
                    | 最后更新：{{ table.updated_at.strftime('%Y年%m月%d日') }}
                    {% endif %}
                </p>
            </div>
        </div>

        <div class="info-grid">
            <!-- 基本信息 -->
            <div class="info-section">
                <h5 class="section-title">
                    <i class="bi bi-info-circle"></i>基本信息
                </h5>
                <div class="info-item">
                    <span class="info-label">所属校区：</span>
                    <span class="info-value">{{ table.campus.name if table.campus else '未分配' }}</span>
                </div>
                {% if table.location %}
                <div class="info-item">
                    <span class="info-label">位置：</span>
                    <span class="info-value">{{ table.location }}</span>
                </div>
                {% endif %}
                <div class="info-item">
                    <span class="info-label">费用：</span>
                    <span class="info-value rate-display">{{ table.hourly_rate }}元/小时</span>
                </div>
                {% if table.description %}
                <div class="info-item">
                    <span class="info-label">描述：</span>
                    <span class="info-value">{{ table.description }}</span>
                </div>
                {% endif %}
                {% if table.features %}
                <div class="info-item">
                    <span class="info-label">特色功能：</span>
                    <span class="info-value">{{ table.features }}</span>
                </div>
                {% endif %}
            </div>

            <!-- 使用率统计 -->
            <div class="info-section">
                <h5 class="section-title">
                    <i class="bi bi-graph-up"></i>使用率统计
                </h5>
                <div class="info-item">
                    <span class="info-label">本月使用率：</span>
                    <div class="info-value">
                        <div class="usage-rate">
                            <div class="usage-progress" style="width: {{ statistics.usage_rate }}%"></div>
                            <div class="usage-text">{{ statistics.usage_rate }}%</div>
                        </div>
                    </div>
                </div>
                <div class="info-item">
                    <span class="info-label">总预约次数：</span>
                    <span class="info-value">{{ statistics.total_reservations }}次</span>
                </div>
                <div class="info-item">
                    <span class="info-label">总收入：</span>
                    <span class="info-value">{{ statistics.total_revenue }}元</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用统计数据 -->
    <div class="stat-cards">
        <div class="stat-card primary">
            <div class="stat-icon primary">
                <i class="bi bi-calendar-day"></i>
            </div>
            <h3 class="stat-number">{{ statistics.today_reservations }}</h3>
            <div class="stat-label">今日预约</div>
            <div class="stat-sublabel">收入：{{ statistics.today_revenue }}元</div>
        </div>

        <div class="stat-card success">
            <div class="stat-icon success">
                <i class="bi bi-calendar-week"></i>
            </div>
            <h3 class="stat-number">{{ statistics.week_reservations }}</h3>
            <div class="stat-label">本周预约</div>
            <div class="stat-sublabel">收入：{{ statistics.week_revenue }}元</div>
        </div>

        <div class="stat-card info">
            <div class="stat-icon info">
                <i class="bi bi-calendar-month"></i>
            </div>
            <h3 class="stat-number">{{ statistics.month_reservations }}</h3>
            <div class="stat-label">本月预约</div>
            <div class="stat-sublabel">收入：{{ statistics.month_revenue }}元</div>
        </div>

        <div class="stat-card warning">
            <div class="stat-icon warning">
                <i class="bi bi-percent"></i>
            </div>
            <h3 class="stat-number">{{ statistics.usage_rate }}%</h3>
            <div class="stat-label">使用率</div>
            <div class="stat-sublabel">本月数据</div>
        </div>
    </div>

    <!-- 状态快速切换 -->
    <div class="status-form">
        <h5 class="section-title">
            <i class="bi bi-toggle-on"></i>状态管理
        </h5>
        <form method="POST" action="{{ url_for('tables.update_status', id=table.id) }}" class="row g-3 align-items-end">
            {{ status_form.hidden_tag() }}
            <div class="col-md-4">
                {{ status_form.status.label(class="form-label") }}
                {{ status_form.status(class="form-select") }}
            </div>
            <div class="col-md-8">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-2"></i>更新状态
                </button>
                <small class="text-muted ms-3">
                    当前状态：
                    <span class="table-status status-{{ table.status }}">
                        {% if table.status == 'available' %}可用
                        {% elif table.status == 'maintenance' %}维护中
                        {% elif table.status == 'disabled' %}禁用
                        {% endif %}
                    </span>
                </small>
            </div>
        </form>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
        <a href="{{ url_for('tables.list') }}" class="btn btn-secondary btn-action">
            <i class="bi bi-arrow-left me-2"></i>返回列表
        </a>

        <a href="{{ url_for('tables.edit', id=table.id) }}" class="btn btn-warning btn-action">
            <i class="bi bi-pencil me-2"></i>编辑球台
        </a>

        <a href="{{ url_for('tables.delete', id=table.id) }}"
           class="btn btn-danger btn-action"
           onclick="return confirm('确定要删除此球台吗？此操作不可撤销！')">
            <i class="bi bi-trash me-2"></i>删除球台
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 实时数据刷新功能
    const refreshStats = function() {
        fetch(`/tables/api/{{ table.id }}/statistics`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新统计数据
                    const stats = data.data;

                    // 更新今日数据
                    document.querySelector('.stat-card.primary .stat-number').textContent = stats.today_reservations;
                    document.querySelector('.stat-card.primary .stat-sublabel').textContent = `收入：${stats.today_revenue}元`;

                    // 更新本周数据
                    document.querySelector('.stat-card.success .stat-number').textContent = stats.week_reservations;
                    document.querySelector('.stat-card.success .stat-sublabel').textContent = `收入：${stats.week_revenue}元`;

                    // 更新本月数据
                    document.querySelector('.stat-card.info .stat-number').textContent = stats.month_reservations;
                    document.querySelector('.stat-card.info .stat-sublabel').textContent = `收入：${stats.month_revenue}元`;

                    // 更新使用率
                    document.querySelector('.stat-card.warning .stat-number').textContent = `${stats.usage_rate}%`;
                    document.querySelector('.usage-progress').style.width = `${stats.usage_rate}%`;
                    document.querySelector('.usage-text').textContent = `${stats.usage_rate}%`;
                }
            })
            .catch(error => console.error('Error fetching stats:', error));
    };

    // 每60秒刷新一次统计数据
    setInterval(refreshStats, 60000);

    // 状态表单提交确认
    document.querySelector('form').addEventListener('submit', function(e) {
        const selectedStatus = document.querySelector('select[name="status"]').value;
        const statusText = {
            'available': '可用',
            'maintenance': '维护中',
            'disabled': '禁用'
        }[selectedStatus];

        if (!confirm(`确定要将球台状态设为"${statusText}"吗？`)) {
            e.preventDefault();
            return false;
        }
    });
});
</script>
{% endblock %}